<template>
    <view class="goods_info_card">
        <view class="goods_info_card_wrap">
            <view class="goods_info_card_wrap_left">
                <image class="goods_info_card_wrap_left_img" :src="state.coverImg" />
            </view>
            <view class="goods_info_card_wrap_right">
                <view class="goods_name">{{ state.goodsName }} </view>
                <view class="goods_sku">{{ state.specAttr }}</view>
                <view v-if="props.from === 'card'" class="goods_price">
                    <text>拼团价 ¥</text>
                    <text>{{ groupPriceArr[0] }}</text>
                    <text v-if="groupPriceArr[1]">.{{ groupPriceArr[1] }}</text>
                    <text v-if="isGroupPrice">起</text>
                    <text>¥{{ skuPrice }} <text v-if="isSkuPrice">起</text> </text>
                </view>
                <view v-else class="goods_price">
                    <text>拼团价 ¥</text>
                    <text>{{ groupPriceArr[0] }}</text>
                    <text v-if="groupPriceArr[1]">.{{ groupPriceArr[1] }}</text>
                    <text>¥{{ skuPrice }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { inject, computed } from 'vue';
const currency = inject('currency');
const props = defineProps({
    data: { type: Object, default: () => ({}) },
    from: { type: String }
});
const state = computed(() => {
    return props.data;
});
// 拼团价
const groupPriceArr = computed(() => {
    return currency(state.value.groupPrice || state.value.skuSpellPrice)
        .divide(100)
        .value.toString()
        .split('.');
});
// 拼团价最小最大值
const isGroupPrice = computed(() => {
    return state.value.skuPrice !== state.value.skuSpellPrice;
});
// 原价
const skuPrice = computed(() => {
    return currency(state.value.skuPrice).divide(100).value;
});
// 原价最小最大值
const isSkuPrice = computed(() => {
    return state.value.goodsMaxPrice !== state.value.goodsMinPrice;
});
</script>

<style lang="scss" scoped>
.goods_info_card {
    .goods_info_card_wrap {
        padding: 29rpx;
        margin-bottom: 18rpx;
        display: flex;
        background-color: #fff;
        .goods_info_card_wrap_left {
            margin-right: 22rpx;
            .goods_info_card_wrap_left_img {
                width: 200rpx;
                height: 200rpx;
                border-radius: 7rpx;
            }
        }
        .goods_info_card_wrap_right {
            padding: 10rpx 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .goods_name {
                margin-bottom: 10rpx;
                font-size: 32rpx;
                color: #333333;
                line-height: 40rpx;
                height: 80rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-all;
            }
            .goods_sku {
                height: 28rpx;
                font-size: 28rpx;
                color: #999999;
                margin-bottom: 14rpx;
            }
            .goods_price {
                font-size: 24rpx;
                color: #ff3b30;
                text {
                    &:nth-child(2) {
                        font-size: 28rpx;
                        font-weight: bold;
                    }
                    &:last-child {
                        margin-left: 8rpx;
                        font-size: 22rpx;
                        color: #969696;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }
}
</style>
